<template>
    <div>
        <component v-if="state.data.template" @reload="loadArticleList" :data="state.data" :params="params" :is="templates[state.data.template]" />
    </div>
</template>

<script setup lang="ts">
import { articleList } from '~/api/cms'

definePageMeta({
    name: 'cmsChannel',
    path: '/cms/channel/:value/:type?',
})

const route = useRoute()
const state: {
    data: ArticleListData
} = reactive({
    data: {
        template: '',
    },
})

const ssrState = useState<anyObj>('ssrState', () => {
    return {
        title: '',
        meta: [],
    }
})
const cmsConfig = useCmsConfig()
const loadArticleList = async (params: anyObj) => {
    const { data } = await articleList(params)
    if (data.value?.code == 1) {
        state.data = data.value.data
        if (state.data.info) {
            const title = state.data.info.name || state.data.info.seotitle
            if (state.data.info.keywords) {
                ssrState.value.meta.push({ name: 'keywords', content: state.data.info.keywords })
            }

            // ssrState.value.meta.push({ property: 'og:type', content: 'webpage' })
            ssrState.value.meta.push({ property: 'og:url', content: `${cmsConfig.front_host}${route.path}` })
            ssrState.value.meta.push({ property: 'og:site_name', content: cmsConfig.index_seo_title })

            if (title) {
                ssrState.value.meta.push({ property: 'og:title', content: title })
                ssrState.value.title = title
            } else {
                if (route.params.type == 'search') {
                    const title = `【${route.params.value}】的搜索结果`
                    ssrState.value.meta.push({ property: 'og:title', content: title })
                    ssrState.value.title = title
                }
            }

            if (state.data.info.description) {
                ssrState.value.meta.push({ name: 'description', content: state.data.info.description })
                ssrState.value.meta.push({ property: 'og:description', content: state.data.info.description })
            } else {
                if (route.params.type == 'search') {
                    const description = `【${route.params.value}】的搜索结果-${cmsConfig.index_seo_title}`
                    ssrState.value.meta.push({ name: 'description', content: description })
                    ssrState.value.meta.push({ property: 'og:description', content: description })
                } else if (route.params.type == 'tag') {
                    const description = `【${title}】的相关文章-${cmsConfig.index_seo_title}`
                    ssrState.value.meta.push({ name: 'description', content: description })
                    ssrState.value.meta.push({ property: 'og:description', content: description })
                }
            }
        }
    }
}

const templates: Record<string, Component> = {}
const templateComponents = import.meta.glob('~/composables/template/cms/channel/**.vue')
for (const key in templateComponents) {
    const res: any = await templateComponents[key]()
    const fileName = key.replace('/composables/template/cms/channel/', '').replace('.vue', '')
    templates[fileName] = res.default
}

const assembleParams = () => {
    const type = route.params.type || 'channel'
    return {
        tag: type == 'tag' ? route.params.value : 0,
        channel: type == 'channel' ? route.params.value : 0,
        keywords: type == 'search' ? route.params.value : '',
        user: type == 'user' ? route.params.value : 0,
    }
}

const params = assembleParams()
await loadArticleList(params)

useHead({
    title: ssrState.value.title,
    meta: ssrState.value.meta,
})
</script>

<style scoped lang="scss"></style>
